<div id="liveTvTunerPage" data-role="page" class="page type-interior liveTvSettingsPage">
    <div>
        <div class="content-primary">
            <form>
                <div class="verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h1 class="sectionTitle">${HeaderLiveTvTunerSetup}</h1>
                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
                    </div>
                </div>

                <div class="selectContainer">
                    <select is="emby-select" class="selectType" label="${LabelTunerType}" required="required"></select>
                </div>

                <button is="emby-button" type="button" class="raised button-cancel block btnDetect hide" style="margin-bottom:3em;">${HeaderDetectMyDevices}</button>

                <div class="inputContainer fldFriendlyName hide">
                    <input is="emby-input" type="text" class="txtFriendlyName" label="${LabelFriendlyName}" autocomplete="off" />
                </div>

                <div class="inputContainer fldPath hide">
                    <div style="display: flex; align-items: center;">
                        <div style="flex-grow: 1;">
                            <input is="emby-input" type="text" class="txtDevicePath" label="${LabelFileOrUrl}" required="required" autocomplete="off" />
                        </div>
                        <button type="button" is="paper-icon-button-light" class="btnSelectPath hide emby-input-iconbutton"><span class="material-icons search"></span></button>
                    </div>
                </div>

                <div class="inputContainer fldUserAgent hide">
                    <input is="emby-input" type="text" class="txtUserAgent" label="${LabelUserAgent}" autocomplete="off" />
                    <div class="fieldDescription">${UserAgentHelp}</div>
                </div>

                <div class="inputContainer fldTunerCount hide">
                    <input is="emby-input" type="number" pattern="[0-9]*" required="required" min="0" step="1" class="txtTunerCount" label="${LabelSimultaneousConnectionLimit}" autocomplete="off" value="0" />
                    <div class="fieldDescription">${SimultaneousConnectionLimitHelp}</div>
                </div>

                <div class="checkboxContainer checkboxContainer-withDescription fldFavorites hide">
                    <label>
                        <input type="checkbox" is="emby-checkbox" class="chkFavorite" />
                        <span>${LabelImportOnlyFavoriteChannels}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${ImportFavoriteChannelsHelp}</div>
                </div>

                <div class="checkboxContainer checkboxContainer-withDescription fldTranscode hide">
                    <label>
                        <input type="checkbox" is="emby-checkbox" class="chkTranscode" />
                        <span>${LabelAllowHWTranscoding}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${AllowHWTranscodingHelp}</div>
                </div>

                <div class="checkboxContainer checkboxContainer-withDescription fldStreamLoop hide">
                    <label>
                        <input type="checkbox" is="emby-checkbox" class="chkStreamLoop" />
                        <span>${EnableStreamLooping}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${EnableStreamLoopingHelp}</div>
                </div>

                <p class="drmMessage hide">${DrmChannelsNotImported}</p>
                <br />
                <input type="hidden" class="fldDeviceId" />
                <div>
                    <button is="emby-button" type="submit" class="raised button-submit block">
                        <span>${Save}</span>
                    </button>
                    <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
                        <span>${ButtonCancel}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
